<template>
  <!--  <div class="app">-->
  <ALayout class="page-index">
    <HomeHeader :userInfo="userInfo"></HomeHeader>
    <ALayout class="main">
      <!---分组设置 start-->
      <div
        class="editGroup"
        v-show="editGroup.show"
        :style="{ top: editGroup.top, left: editGroup.left }"
      >
        <div
          v-if="editGroup.children != 3"
          class="edit_item"
          @click="() => (editGroup.addShow = true)"
        >
          <a-icon type="plus" />添加子分组
        </div>
        <div class="edit_item" @click="() => (editGroup.renameShow = true)">
          <a-icon type="edit" />重命名
        </div>
        <div class="edit_item" @click="deleteGroup">
          <a-icon type="delete" />删除
        </div>
      </div>
      <ALayoutSider class="h_sider" width="263px">
        <!-- <a-menu
          :selectedKeys="homeSelected"
          :inlineCollapsed="false"
          class="menu-operate menu-operate-title"
        >
          <a-menu-item style="margin-top:0;" key="1" @click="redirectHome">
            <img
              src="https://image.xuexiwangzhe.com/FhM9lLj0wfiheuzBlxRnOWBWOshS"
              class="menu-title-item-img"
            />
            <span>首页</span>
          </a-menu-item>
        </a-menu>
        <a-divider type="horizontal" class="menu-divider-item" /> -->
        <div>
          <mu-flex
            class="menu-operate menu-operate-title-sign"
            align-items="center"
          >
            <img
              src="https://image.xuexiwangzhe.com/FqpKTh2Zt2zuyVFo98GgD3uCC4c1"
              class="menu-title-item-img"
              style="width:18px;"
            />
            <span>项目</span>
          </mu-flex>
          <a-menu
            :selectedKeys="proType"
            :inlineCollapsed="false"
            class="menu-operate"
          >
            <!--1:打卡，2：面授，3：闯关，4：分组-->
            <a-menu-item
              key="2"
              class="main_menu"
              @click="changeProjectClass('2')"
            >
              <span>面授项目</span>
            </a-menu-item>
            <a-menu-item
              key="1"
              class="main_menu"
              @click="changeProjectClass('1')"
            >
              <span>打卡项目</span>
            </a-menu-item>
            <a-menu-item
              key="3"
              class="main_menu"
              @click="changeProjectClass('3')"
            >
              <span>闯关项目</span>
            </a-menu-item>
          </a-menu>
        </div>
        <!-- <a-divider type="horizontal" class="menu-divider-item" />
        <div>
          <mu-flex
            class="menu-operate menu-operate-title-sign"
            align-items="center"
          >
            <img
              src="https://image.xuexiwangzhe.com/FpkUvfjQ4eER6t0Kb36O_7JfYNWx"
              class="menu-title-item-img"
              style="width:18px;"
            />
            <span>管理</span>
          </mu-flex>
          <a-menu
            :selectedKeys="manageSelected"
            :inlineCollapsed="false"
            class="menu-operate"
          >
            <a-menu-item key="1" class="main_menu">
              <span>素材管理</span>
            </a-menu-item>
            <a-menu-item key="2" class="main_menu">
              <span>试题管理</span>
            </a-menu-item>
            <a-menu-item key="3" class="main_menu">
              <span>用户管理</span>
            </a-menu-item>
          </a-menu>
        </div>
        <a-divider type="horizontal" class="menu-divider-item" />
        <a-menu
          :selectedKeys="dataSelected"
          :inlineCollapsed="false"
          class="menu-operate menu-operate-title"
        >
          <a-menu-item>
            <img
              src="https://image.xuexiwangzhe.com/FhMe0B3A-BaN87KsQ5BkoMj-KpVj"
              class="menu-title-item-img"
            />
            <span>统计</span>
          </a-menu-item>
        </a-menu>
        <a-divider type="horizontal" class="menu-divider-item" />
        <div>
          <mu-flex
            class="menu-operate menu-operate-title-sign"
            align-items="center"
          >
            <img
              src="https://image.xuexiwangzhe.com/Fp5A3O4wQEehvJNOK3VKC1HXjPf7"
              class="menu-title-item-img"
            />
            <span>推广</span>
          </mu-flex>
          <a-menu
            :selectedKeys="extendSelected"
            :inlineCollapsed="false"
            class="menu-operate"
          >
            <a-menu-item key="2" class="main_menu">
              <span>精准分享</span>
            </a-menu-item>
            <a-menu-item key="1" class="main_menu">
              <span>沙龙活动</span>
            </a-menu-item>
          </a-menu>
        </div> -->
        <!-- <a-divider type="horizontal" class="menu-divider-item" />
        <a-menu class="menu-operate menu-operate-title">
          <a-menu-item @click="redirectSettings">
            <img
              src="https://image.xuexiwangzhe.com/FpVP6R_OsC6eFZoKK7LmXcZrYbuw"
              class="menu-title-item-img"
            />
            <span>设置</span>
          </a-menu-item>
        </a-menu> -->
        <!-- floder list start -->
        <!-- <div style="position: relative;">
          <ul class="tree_menu">
            <li class="tree_item" v-for="item in treeData">
              <div
                :class="
                  menuChecked.projectCategoryId == item.id
                    ? 'tree_item_content item_choose'
                    : 'tree_item_content'
                "
              >
                <span class="tree_left_icon">
                  <a-icon type="folder-open" />
                </span>
                <span class="tree_text" @click="chooseGroup(item.id)">{{
                  item.name
                }}</span>
                <span class="tree_add">
                  <a-icon
                    type="ellipsis"
                    @click="showGroupEdit(item.name, item.id, item.children)"
                  />
                </span>
              </div>
              <ul
                class="tree_menu_child"
                v-if="item.children !== null && item.children.length > 0"
              >
                <li v-for="tc in item.children">
                  <div
                    :class="
                      menuChecked.projectCategoryId == tc.id
                        ? 'tree_item_content item_choose'
                        : 'tree_item_content'
                    "
                  >
                    <span class="tree_left_icon">
                      <a-icon type="folder" />
                    </span>
                    <span class="tree_text" @click="chooseGroup(tc.id)">{{
                      tc.name
                    }}</span>
                    <span class="tree_add">
                      <a-icon
                        type="ellipsis"
                        @click="showGroupEdit(tc.name, tc.id, item.children)"
                      />
                    </span>
                  </div>
                  <ul
                    class="tree_menu_child"
                    v-if="tc.children !== null && tc.children.length > 0"
                  >
                    <li v-for="ts in tc.children">
                      <div
                        :class="
                          menuChecked.projectCategoryId == ts.id
                            ? 'tree_item_content item_choose'
                            : 'tree_item_content'
                        "
                      >
                        <span class="tree_left_icon">
                          <a-icon type="file" />
                        </span>
                        <span class="tree_text" @click="chooseGroup(ts.id)">{{
                          ts.name
                        }}</span>
                        <span class="tree_add">
                          <a-icon
                            type="ellipsis"
                            @click="showGroupEdit(ts.name, ts.id, 3)"
                          />
                        </span>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul> -->

        <!---分组设置 start-->
        <!-- </div> -->
        <!-- floder list end -->
        <!-- <div class="h_talk">
          <a-icon type="question-circle" />
          跟小工具幕后聊一聊
        </div> -->
      </ALayoutSider>
      <ALayoutContent class="h_content">
        <transition appear>
          <router-view></router-view>
        </transition>
      </ALayoutContent>
    </ALayout>
    <!-- 注册 start -->
    <div v-show="isSign" class="sign_back"></div>
    <div v-show="isSign" class="signBox">
      <div class="sign_title">完善注册信息</div>
      <a-form-model
        ref="registerForm"
        :model="registerFormData"
        class="sign_form"
      >
        <a-form-model-item
          v-bind="formItemLayout"
          label="企业/机构名称"
          class="sign_form_item"
          prop="companyName"
          :rules="[{ required: true, message: '请填写企业/机构名称' }]"
        >
          <a-input v-model="registerFormData.companyName" />
        </a-form-model-item>
        <a-form-model-item
          v-bind="formItemLayout"
          label="运营者名称"
          class="sign_form_item"
          prop="serverName"
          :rules="[{ required: true, message: '请填写运营者名称' }]"
        >
          <a-input v-model="registerFormData.serverName" />
        </a-form-model-item>
        <a-form-model-item
          v-bind="formItemLayout"
          label="手机号"
          class="sign_form_item"
          prop="telephone"
          :rules="[{ required: true, message: '请填写手机号' }]"
        >
          <a-input
            v-model="registerFormData.telephone"
            placeholder="请输入中国大陆手机号"
          />
        </a-form-model-item>
        <a-form-model-item
          v-bind="formItemLayout"
          label="短信验证码"
          class="sign_form_item"
          prop="passcode"
          :rules="[{ required: true, message: '请填写验证码' }]"
        >
          <a-input
            v-model="registerFormData.passcode"
            style="width: 65%;"
            placeholder="请输入手机短信验证码"
          />
          <a class="getCode" @click="getVerifyCode" v-if="!verifyInterval"
            >获取验证码</a
          >
          <span
            style="display: inline-block;
    width: 35%;
    text-align: center;"
            v-if="verifyInterval"
            >获取验证码({{ verifyTime }})</span
          >
        </a-form-model-item>
        <a-form-model-item
          v-bind="tailFormItemLayout"
          class="agreement"
          prop="agreement"
          :rules="[{ required: true, message: '请阅读用户协议和隐私政策' }]"
        >
          <!-- <a-checkbox-group v-model="registerFormData.agreement"> -->
          <a-checkbox
            :checked="registerFormData.agreement"
            name="agreement"
            @change="agreementChange"
          >
            我已阅读并接受<a href="info.html" target="view_window">用户协议</a
            >和<a href="info.html" target="view_window">隐私政策</a>
          </a-checkbox>
          <!-- </a-checkbox-group> -->
        </a-form-model-item>
        <a-form-model-item v-bind="tailFormItemLayout">
          <a-button
            @click="handleSubmit"
            :disabled="!registerFormData.agreement"
            type="primary"
            size="large"
            html-type="submit"
            style="width: 200px;"
            >保存</a-button
          >
        </a-form-model-item>
      </a-form-model>
    </div>
    <!-- 注册 end -->
    <!-- 注册成功 modal 框 -->
    <mu-dialog
      width="500"
      :overlay-close="false"
      class="register-end-modal"
      :open.sync="registerEndModelVisible"
    >
      <div class="title" slot="title">
        <div>
          <img
            class="success-img"
            src="https://image.xuexiwangzhe.com/FmCm6yDF1nYoUref5jcnS9XPIvf6"
          />
          <span>恭喜您，注册成功</span>
        </div>
        <img
          class="close-img"
          src="https://image.xuexiwangzhe.com/FgsjCo3nV6SPgpr6iyaznmtM9tfc"
          @click="registerEndModelVisible = false"
        />
      </div>

      <div class="desc">
        您目前使用的套餐是个人版<br />
        如需升级到企业版，请点击下方的按钮进行操作
      </div>
      <div class="update">
        <mu-button class="update-btn">
          升级套餐
        </mu-button>
      </div>
      <div class="try">
        <mu-divider class="mu-divider-txt try-line"></mu-divider>
        <span class="try-txt" @click="registerEndModelVisible = false"
          >先尝试一下</span
        >
        <mu-divider class="mu-divider-txt try-line"></mu-divider>
      </div>
    </mu-dialog>

    <!-- 创建分组start -->
    <a-modal
      v-model="editGroup.addShow"
      width="540px"
      centered
      :closable="false"
      :footer="null"
      :title="null"
    >
      <div class="card_name_header">
        创建分组
      </div>
      <div class="inputBox">
        <input type="text" class="input" v-model="neGroup.name" />
      </div>
      <div class="car_name_footer">
        <a-button
          key="back"
          @click="
            () => {
              (neGroup = {
                isShow: false,
                name: '',
                parentId: '0',
                isSetingGroup: false,
              }),
                (editGroup.addShow = false);
            }
          "
          >取消</a-button
        >
        <a-button key="submit" type="primary" @click="createGroup">
          确认
        </a-button>
      </div>
    </a-modal>
    <!-- 创建分组end -->
    <!-- 重命名分组start -->
    <a-modal
      centered
      v-model="editGroup.renameShow"
      width="540px"
      :closable="false"
      :footer="null"
      :title="null"
    >
      <div class="card_name_header">
        重命名分组
      </div>
      <div class="inputBox">
        <input type="text" class="input" v-model="neGroup.name" />
      </div>
      <div class="car_name_footer">
        <a-button
          key="back"
          @click="
            () => {
              (neGroup = {
                isShow: false,
                name: '',
                parentId: '0',
                isSetingGroup: false,
              }),
                (editGroup.renameShow = false);
            }
          "
          >取消</a-button
        >
        <a-button key="submit" type="primary" @click="renameGroup">
          确认
        </a-button>
      </div>
    </a-modal>
    <!-- 创建分组end -->

    <!--辅助关闭设置弹窗-->
    <div
      class="edit_mask"
      v-show="editGroup.isSetingGroup"
      @click="
        () => {
          (editGroup.isSetingGroup = false), (editGroup.show = false);
        }
      "
    ></div>
  </ALayout>

  <!--  </div>-->
</template>

<script>
import HomeHeader from "../../../components/header-home";
import AInputSearch from "ant-design-vue/es/input/Search";
import { getUserInfo, checkUserInfo } from "../../../../util/user";
import { setInterval, clearInterval } from "timers";
import Vue from "vue";
import { mapState } from "vuex";

var baseImgUrl = "https://image.xuexiwangzhe.com/";
var cardBasePost = "Fky4K75jb3uzhV5XzV-sCliiy5PE";
var _export = {
  data() {
    return {
      isSign: false,
      homeSelected: [""],
      registerEndModelVisible: false,
      verifyInterval: null,
      verifyTime: 0,
      userInfo: {},
      registerFormData: {
        companyName: "",
        serverName: "",
        telephone: "",
        passcode: "",
        agreement: false,
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 6,
          },
        },
      },
      newProjectForm: {
        projectName: "",
      },
      treeData: [],
      replaceFields: {
        key: "id",
        title: "name",
      },
      editGroup: {
        //设置分组
        show: false,
        top: "0",
        left: "0",
        isSetingGroup: false,
        addShow: false,
        renameShow: false,
        deleteShow: false,
        children: null,
      },
      neGroup: {
        isShow: false,
        name: "",
        parentId: "0",
      },
    };
  },
  async created() {
    this.init();
  },
  methods: {
    //菜单选择
    changeProjectClass(type) {
      let proType = [...this.$store.state.proType];
      proType[0] = type;
      this.$store.commit("setProType", proType);
      this.$router.push("/index/project");
    },
    redirectHome() {
      this.$router.push("/index/home");
    },
    init() {
      this.checkUserInfo();
      // 获取并设置用户信息
      this.setUserInfo();
      //查询所有分组
      // this.initGroupTree();

      //查询项目-我创建的
      // this.menuChecked = ;
      if (
        sessionStorage.getItem("menuChecked") != null &&
        sessionStorage.getItem("menuChecked") != undefined
      ) {
        console.log(sessionStorage.getItem("menuChecked"));
        this.menuChecked = JSON.parse(sessionStorage.getItem("menuChecked"));
      } else {
        console.log("未获取到session");
      }

      // this.getProject();
      //获取上传图片的token
      // this.getUpToken();
    },
    checkUserInfo() {
      checkUserInfo(this.$axios).then((res) => {
        if (res.success) {
          if (
            res.perfectInformation &&
            parseInt(res.perfectInformation) === 1
          ) {
            this.isSign = true;
          } else {
            this.isSign = false;
          }
        } else {
          console.log("检查用户完善信息出错了:" + res.msg);
        }
      });
    },
    setUserInfo() {
      getUserInfo(this.$axios)
        .then((res) => {
          this.userInfo = res;
        })
        .catch((err) => {
          console.log("获取用户信息失败:" + err);
        });
    },
    redirectSettings() {
      location.href = "user.html";
    },
    agreementChange(e) {
      this.registerFormData.agreement = e.target.checked;
      this.$forceUpdate();
    },
    getVerifyCode() {
      if (!this.verifyInterval) {
        const tel = this.registerFormData.telephone;
        if (!tel) {
          this.$message.error("请先输入手机号");
          return;
        }
        const params = { phone: tel };
        this.$axios.get("/register/verifyCode", { params }).then((res) => {
          if (res.success) {
            this.$message.success("发送验证码成功");
            this.verifyTime = 60;
            this.verifyInterval = setInterval(() => {
              if (this.verifyTime === 0) {
                clearInterval(this.verifyInterval);
                this.verifyInterval = null;
              } else this.verifyTime -= 1;
            }, 1000);
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    handleSubmit() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          const params = {
            companyName: this.registerFormData.companyName,
            name: this.registerFormData.serverName,
            phone: this.registerFormData.telephone,
            verifyCode: this.registerFormData.passcode,
          };
          this.$axios.post("/register/submit", params).then((res) => {
            if (res.success) {
              this.isSign = false;
              this.registerEndModelVisible = true;
              this.init();
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //查询分组tree ：/projectCategory/list
    initGroupTree() {
      var _this = this;

      this.$axios.get("/projectCategory/list").then((res) => {
        _this.treeData = res.treeNodes;
        _this.editGroup.deleteShow = false;
        _this.editGroup.show = false;
        _this.editGroup.addShow = false;
        _this.editGroup.isSetingGroup = false;
        _this.editGroup.renameShow = false;
      });
    },
    //创建分组
    showGroupEdit(name, pid, child) {
      // alert(pid);      
      this.editGroup.isSetingGroup = true;
      this.editGroup.top = event.clientY + 10 + "px";
      this.editGroup.left = event.clientX + "px";
      this.editGroup.show = true;
      this.neGroup.name = "";
      this.neGroup.parentId = pid;
      this.editGroup.children = child;
    },
    createGroup() {
      const url = "projectCategory/create";
      const _this = this;
      const parms = _this.neGroup;
      _this.$axios.post(url, parms).then((res) => {
        if (res.success) {
          _this.$message.success("创建成功");
          this.neGroup.isShow = false;
          _this.initGroupTree();
        } else {
          _this.$message.error(res.msg);
        }
      });
    },
    //删除分组
    deleteGroup() {
      const _this = this;
      this.$confirm({
        title: "您确定要删除该分组么？",
        content: "请在删除分组前将关联项目移出分组，否则无法删除！",
        centered: true,
        cancelText: "取消",
        okText: "确认",
        okType: "danger",
        onOk() {
          const url = "projectCategory/delete";
          const parms = { id: _this.neGroup.parentId };
          _this.$axios.post(url, parms).then((res) => {
            if (res.success) {
              _this.$message.success("删除成功");
              _this.initGroupTree();
            } else {
              _this.$message.error(res.msg);
            }
          });
        },
        onCancel() {},
      });
    },
    renameGroup() {
      const url = "projectCategory/update";
      const _this = this;
      const parms = { id: _this.neGroup.parentId, name: _this.neGroup.name };
      _this.$axios.post(url, parms).then((res) => {
        if (res.success) {
          _this.$message.success("修改成功");
          this.neGroup.isShow = false;
          _this.initGroupTree();
        } else {
          _this.$message.error(res.msg);
        }
      });
    },
    //选择分组
    // chooseGroup(id) {
    //   this.menuChecked.projectCategoryId = id;
    //   this.menuChecked.type = 4;
    //   this.menuChecked.page = 1;
    //   this.proType = ["4"];
    //   console.log(this.menuChecked.projectCategoryId);
    //   this.getProject();
    // },
  },
  computed: mapState(["proType"]),
  components: {
    AInputSearch,
    HomeHeader,
  },
};
export default _export;
</script>

<style type="text/css" lang="scss">
// @import "~ant-design-vue/dist/antd.min.css";
.page-index {
  height: 100%;
  display: block !important;

  .main {
    background-color: #f5f6f6;
    min-height: calc(100% - 59px);
  }

  .menu-operate {
    background: none;
    margin-bottom: 13px;
    border-right: none;

    .ant-menu-item {
      padding-left: 81px;
      color: #374052;
    }

    .ant-menu-item-selected {
      background-color: transparent !important ;
      span {
        color: #3366ff !important;
      }
    }
  }

  .menu-operate-title-sign {
    > * {
      vertical-align: middle;
    }
    padding-left: 31px;
    height: auto;
    line-height: 1;
    font-size: 18px;
    color: #374052;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 15px;
    margin-bottom: 3px;
  }

  .menu-operate-title.ant-menu-vertical {
    .ant-menu-item {
      > * {
        vertical-align: middle;
      }
      padding-left: 31px;
      height: auto;
      line-height: 1;
      font-size: 18px;
      color: #374052;
      padding-top: 10px;
      padding-bottom: 10px;
      margin-top: 15px;
      margin-bottom: 2px;
    }
  }

  .menu-title-item-img {
    width: 20px;
    margin-right: 30px;
  }

  .menu-divider-item {
    margin: 0 0 0 31px;
    width: 200px;
    min-width: 200px;
    color: #e9e9e9;
  }
}

.user-menu {
  border: 1px solid #e0e4e8;
  border-radius: 4px;
  width: 168px;
  box-shadow: 2px 4px 7px 0px rgba(125, 127, 129, 0.1);
  .setting-menu-main {
    padding: 0;
    .mu-list {
      &:last-child {
        .mu-item {
          padding-left: 20px;
        }
      }
      padding: 8px 0;
    }
    .mu-item {
      height: auto;
      min-height: 40px;
    }
  }

  .info-menu {
    .mu-item-wrapper {
      padding: 5px 0;
    }
  }
}
.register-end-modal {
  .mu-dialog-title {
    padding: 0;
  }

  .mu-dialog-body {
    padding-bottom: 40px;
  }
  .success-img {
    width: 30px;
    margin-right: 15px;
  }

  .close-img {
    cursor: pointer;
    position: absolute;
    top: 18px;
    right: 17px;
    width: 15px;
  }

  .title {
    padding-top: 37px;
    padding-bottom: 22px;
    position: relative;
    font-size: 18px;
    color: #383a40;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    > * {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .desc {
    color: #838383;
    text-align: center;
    margin-bottom: 22px;
    line-height: 25px;
    span {
      display: block;
    }
  }

  .update {
    margin-bottom: 30px;
    text-align: center;
  }

  .update-btn {
    width: 160px;
    background-color: #3366ff;
    color: white;
    height: 55px;
    box-shadow: none;
  }

  .try {
    text-align: center;
  }

  .try-line {
    background-color: #e8e8e8;
  }

  .try-txt {
    cursor: pointer;
    margin-left: 10px;
    margin-right: 10px;
    color: #3366ff;
  }
}

.h_content {
  background-color: #f5f6f6;
  padding: 30px;
}

.h_sider {
  background-color: #f5f6f6 !important;
  border-right: 1px solid #e9e9e9;
  color: #7f7f7f;
  overflow: hidden;
  margin-top: 30px;
  margin-bottom: 30px;

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #7f7f7f;
  }

  .ant-layout-sider-children {
    position: relative;
    height: auto;
    min-height: 100%;
  }

  .h_talk {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
  }

  .main_menu {
    padding-left: 30px;
    color: #374052;
  }

  .ant-menu {
    color: #7f7f7f;
  }

  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected,
  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-active {
    background-color: #efeef3;

    span {
      color: #010101;
    }

    &::after {
      opacity: 0;
    }
  }

  .toolbar {
    display: none;
    margin-left: 200px;
  }

  .toolbar i {
    margin-left: 16px;
  }

  .node:hover .toolbar {
    display: inline;
  }
}

.sign_back {
  position: fixed;
  width: 100%;
  z-index: 99;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.signBox {
  width: 50%;
  position: fixed;
  height: 70%;
  background-color: #fff;
  z-index: 100;
  border-radius: 10px;
  top: 10%;
  left: 25%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 30px 5%;
  min-width: 600px;
  min-height: 500px;

  .sign_title {
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 20px;
    color: #000;
    line-height: 2;
  }

  .sign_form {
    .sign_form_item {
      margin-bottom: 20px;

      input {
        height: 35px;
      }

      .getCode {
        display: inline-block;
        width: 35%;
        text-align: center;
        font-size: 14px;
      }
    }

    .agreement {
      line-height: 2;
      font-size: 14px;
    }
  }
}

.h_m_tree {
  width: 200px;
  position: relative;
  margin: 0 auto;
}

.card_name_header {
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  padding: 0px 30px;
}

.inputBox {
  padding: 30px;
  line-height: 20px;

  input[type="text"] {
    font-size: 18px;
    border: none;
    outline: none;
    border-bottom: 1px solid #3366ff;
    width: 100%;
    margin-bottom: 20px;
  }

  .classType {
    label {
      margin-right: 30px;
    }
  }
}

.car_name_footer {
  clear: both;
  overflow: hidden;
  text-align: right;

  button {
    margin-left: 30px;
  }
}

.noData {
  text-align: center;

  img {
    width: 400px;
  }

  .search-img {
    margin-bottom: 35px;
    margin-left: 25px;
  }

  .noDataTips {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    color: rgba(158, 160, 164, 1);
  }
}

/*自定义树*/
.edit_mask {
  position: absolute;
  z-index: 98;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0px;
  left: 0px;
}
.editGroup {
  position: absolute;
  width: 135px;
  z-index: 99;
  border: 1px solid rgba(221, 226, 238, 1);
  box-shadow: 0px 3px 10px 0px rgba(2, 25, 41, 0.06);
  border-radius: 3px;
  // right: -90px;
  background-color: #fff;
  line-height: 30px;
  /*text-align: center;*/
  padding: 10px 0px;
  .edit_item {
    padding-left: 15px;
    cursor: pointer;
    .anticon {
      margin-right: 23px;
    }
  }
}
.tree_menu {
  width: 100%;
  list-style: none;
  padding-left: 50px;
  padding-bottom: 35px;
  margin-bottom: 0;
  line-height: 40px;

  .tree_menu_child {
    padding-left: 25px;
  }

  li {
    clear: both;
    /*overflow: hidden;*/
    position: relative;
    list-style: none;
    .tree_item_content {
      clear: both;
      overflow: hidden;

      .tree_left_icon {
        margin-right: 25px;
        padding-left: 2.5px;
        font-size: 19px;
        display: inline-block;
        vertical-align: middle;
      }

      .tree_text {
        width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
      }

      .tree_add {
        float: right;
        margin-right: 10px;
        display: inline-block;
      }
    }
    .item_choose {
      background-color: rgba(237, 239, 243, 1);
    }
  }
}
</style>
